<template>
  <ContentWrap class="full-height">
    <div class="main">
      <div class="left">
        <div class="left-dataset-title">
          <span class="dataset-title">数据集管理</span>
          <el-button
            plain
            type="primary"
            class="add-dataset"
            @click="addDataSets"
            v-has="'reportDesign_addDataSet'"
            ><el-icon><Plus /></el-icon>添加数据集</el-button
          >
        </div>
        <div class="left-dataset-content df">
          <div class="dataset-group">
            <div class="section-name df-c">
              <span style="margin-right: 8px">合同</span>
              <div class="set-group df-c" @click="groupSetVisible = true">
                <el-icon color="#409EFF"><CirclePlus /></el-icon>
                <div class="setting-text">分组设置</div>
              </div>
            </div>
            <el-input
              v-model="datasetKeyword"
              :prefix-icon="Search"
              placeholder="合同搜索"
              class="search"
              clearable
            />
            <div
              v-loading="dataGroupLoading"
              class="group-list cus-scrollbar"
              element-loading-text="拼命加载中"
            >
              <template v-if="displayGroupList && displayGroupList.length">
                <el-collapse>
                  <el-collapse-item
                    v-for="(item, index) in displayGroupList"
                    :key="index"
                    :title="item.name"
                    :name="item.name"
                    @click="OpenDatasets(item)"
                  >
                    <template v-if="item.data && item.data.length">
                      <div
                        v-for="datasetItem in item.data"
                        :key="datasetItem.id"
                        class="dataset-item df-c-b"
                        :class="datasetItemActive.id == datasetItem.id ? 'dataset-item-active' : ''"
                        @click.stop="clickDatasets(datasetItem)"
                      >
                        <div
                          class="set-name overflow-text"
                          style="flex: 1"
                          :title="datasetItem.datasetName"
                        >
                          {{ datasetItem.datasetName }}
                        </div>
                        <div class="action-box df-c">
                          <el-dropdown>
                            <el-icon size="18" class="el_icon"><CopyDocument /></el-icon>
                            <template #dropdown>
                              <el-dropdown-menu>
                                <el-dropdown-item @click="copyAttr(5, datasetItem.datasetName)"
                                  >列表</el-dropdown-item
                                >
                                <el-dropdown-item @click="copyAttr(6, datasetItem.datasetName)"
                                  >区块对</el-dropdown-item
                                >
                              </el-dropdown-menu>
                            </template>
                          </el-dropdown>
                          <el-dropdown>
                            <el-icon size="18" class="el_icon"><CirclePlus /></el-icon>
                            <template #dropdown>
                              <el-dropdown-menu>
                                <el-dropdown-item
                                  @click="copyAttr(5, datasetItem.datasetName, null, true)"
                                  >列表</el-dropdown-item
                                >
                                <el-dropdown-item
                                  @click="copyAttr(6, datasetItem.datasetName, null, true)"
                                  >区块对</el-dropdown-item
                                >
                              </el-dropdown-menu>
                            </template>
                          </el-dropdown>
                          <el-icon size="18" class="el_icon" @click.stop="editDataSet(datasetItem)"
                            ><Edit
                          /></el-icon>
                          <el-icon
                            size="18"
                            class="el_icon"
                            @click.stop="deleteDataSet(datasetItem)"
                            ><Delete
                          /></el-icon>
                        </div>
                      </div>
                    </template>
                    <el-empty v-else :image-size="60" description="暂无数据集" />
                  </el-collapse-item>
                </el-collapse>
              </template>
              <el-empty v-else :image-size="60" description="暂无分组" />
            </div>
          </div>
          <div class="dataset-fields">
            <div class="section-name">字段</div>
            <el-input
              v-model="filedKeyword"
              :prefix-icon="Search"
              placeholder="检索所选数据集内字段"
              class="search"
              clearable
            />
            <div
              v-loading="filedLoading"
              class="group-list cus-scrollbar"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
            >
              <template v-if="datasetColumnList.length">
                <div
                  v-for="fieldItem in displayFields"
                  :key="fieldItem.columnName"
                  class="dataset-item df-c-b"
                >
                  <div class="set-name overflow-text" style="flex: 1" :title="fieldItem.name">
                    {{ fieldItem.name }}
                    <span v-if="datasetItemActive.datasetType == 2"
                      >({{ fieldItem.columnName }})</span
                    >
                    <span v-else>({{ fieldItem.remark }})</span>
                  </div>
                  <div class="action-box df-c">
                    <el-dropdown>
                      <el-icon style="margin-right: 8px"><CopyDocument /></el-icon>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item
                            @click="copyAttr(1, datasetItemActive.datasetName, fieldItem.name)"
                            >文本</el-dropdown-item
                          >
                          <el-dropdown-item
                            @click="copyAttr(2, datasetItemActive.datasetName, fieldItem.name)"
                            >图片</el-dropdown-item
                          >
                          <el-dropdown-item
                            @click="copyAttr(3, datasetItemActive.datasetName, fieldItem.name)"
                            >列表文本</el-dropdown-item
                          >
                          <el-dropdown-item
                            @click="copyAttr(4, datasetItemActive.datasetName, fieldItem.name)"
                            >列表图片</el-dropdown-item
                          >
                          <el-dropdown-item
                            @click="copyAttr(7, datasetItemActive.datasetName, fieldItem.name)"
                            >区块对文本</el-dropdown-item
                          >
                          <el-dropdown-item
                            @click="copyAttr(8, datasetItemActive.datasetName, fieldItem.name)"
                            >区块对图片</el-dropdown-item
                          >
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                    <el-dropdown>
                      <!-- <div class="action action-add" /> -->
                      <el-icon><CirclePlus /></el-icon>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item
                            @click="
                              copyAttr(1, datasetItemActive.datasetName, fieldItem.name, true)
                            "
                            >文本</el-dropdown-item
                          >
                          <el-dropdown-item
                            @click="
                              copyAttr(2, datasetItemActive.datasetName, fieldItem.name, true)
                            "
                            >图片</el-dropdown-item
                          >
                          <el-dropdown-item
                            @click="
                              copyAttr(3, datasetItemActive.datasetName, fieldItem.name, true)
                            "
                            >列表文本</el-dropdown-item
                          >
                          <el-dropdown-item
                            @click="
                              copyAttr(4, datasetItemActive.datasetName, fieldItem.name, true)
                            "
                            >列表图片</el-dropdown-item
                          >
                          <el-dropdown-item
                            @click="
                              copyAttr(7, datasetItemActive.datasetName, fieldItem.name, true)
                            "
                            >区块对文本</el-dropdown-item
                          >
                          <el-dropdown-item
                            @click="
                              copyAttr(8, datasetItemActive.datasetName, fieldItem.name, true)
                            "
                            >区块对图片</el-dropdown-item
                          >
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </div>
                <!-- <el-input
                  v-show="datasetItem.apiResult"
                  v-model="datasetItem.apiResult"
                  type="textarea"
                  placeholder=""
                  :rows="6"
                /> -->
              </template>
              <el-empty v-else :image-size="60" description="暂无字段" />
            </div>
          </div>
        </div>
      </div>
      <div class="canvas">
        <CanvasEditor ref="canvasEditorRef" :templateSetting="templateSettingInfo" />
      </div>
      <!-- 添加数据集弹窗 -->
      <el-dialog
        title="数据集"
        v-model="addDatasetsDialogVisiable"
        width="82%"
        top="20px"
        :close-on-click-modal="false"
        @close="closeAddDataSet"
        class="add-dataset-dialog"
      >
        <el-radio-group v-model="addDatasetType" size="large" style="margin-bottom: 16px">
          <el-radio-button :label="1">sql语句</el-radio-button>
          <el-radio-button :label="2">参数配置</el-radio-button>
        </el-radio-group>
        <div v-show="addDatasetType == 1">
          <el-form :inline="true" :model="sqlForm" class="demo-form-inline" ref="sqlRef">
            <el-form-item
              label="数据集名称"
              prop="datasetName"
              :rules="filter_rules('数据集名称', { required: true })"
            >
              <el-input
                v-model="sqlForm.datasetName"
                placeholder="数据集名称"
                style="width: 192px"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="数据源"
              prop="datasourceId"
              :rules="filter_rules('选择数据源', { required: true })"
              style="width: 270px"
            >
              <el-select
                v-model="sqlForm.datasourceId"
                placeholder="选择数据源"
                @change="changeDatasource"
              >
                <el-option
                  v-for="op in dataSource"
                  :label="op.name"
                  :value="op.id"
                  :key="op.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="sql类型"
              prop="sqlType"
              :rules="filter_rules('选择sql类型', { required: true })"
              v-if="datasourceType == 1"
              style="width: 270px"
            >
              <el-select v-model="sqlForm.sqlType" placeholder="选择sql类型">
                <el-option
                  v-for="op in selectUtil.sqlType"
                  :label="op.label"
                  :value="op.value"
                  :key="op.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="是否公共数据集"
              prop="isCommon"
              :rules="filter_rules('是否公共数据集', { required: true })"
              style="width: 270px"
            >
              <el-select v-model="sqlForm.isCommon" placeholder="是否公共数据集">
                <el-option
                  v-for="item in selectUtil.yesNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="分组"
              prop="dirId"
              :rules="filter_rules('选择分组', { required: true })"
              style="width: 270px"
              v-if="sqlForm.isCommon == 2"
            >
              <el-select v-model="sqlForm.dirId" placeholder="选择分组">
                <el-option
                  v-for="item in groupList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  :disabled="item.id == 0"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="行列转置"
              prop="isConvert"
              :rules="filter_rules('行列转置', { required: true })"
              style="width: 270px"
            >
              <el-select v-model="sqlForm.isConvert" placeholder="行列转置">
                <el-option
                  v-for="item in selectUtil.yesNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="固定列"
              prop="fixedColumn"
              :rules="filter_rules('固定列', { required: false })"
              v-if="sqlForm.isConvert == 1"
              style="width: 270px"
            >
              <el-select v-model="sqlForm.fixedColumn" placeholder="固定列" multiple collapse-tags>
                <el-option
                  v-for="item in sqlColumnTableData.tableData"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="列转行(表头)"
              prop="headerName"
              :rules="filter_rules('列转行(表头)', { required: false })"
              v-if="sqlForm.isConvert == 1"
              style="width: 270px"
            >
              <el-select v-model="sqlForm.headerName" placeholder="列转行(表头)">
                <el-option
                  v-for="item in sqlColumnTableData.tableData"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="列转行(数值)"
              prop="valueField"
              :rules="filter_rules('列转行(数值)', { required: false })"
              v-if="sqlForm.isConvert == 1"
              style="width: 270px"
            >
              <el-select v-model="sqlForm.valueField" placeholder="列转行(数值)">
                <el-option
                  v-for="item in sqlColumnTableData.tableData"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
          </el-form>

          <div class="df" style="width: 100%; border: 1px solid #e8e8e8">
            <div v-show="selectVariableOpen" class="variable-content">
              <div class="variable-title">选择变量</div>
              <div class="variable-warp">
                <div class="variable-warp-title">系统变量</div>
                <div class="variable-list df">
                  <div
                    v-for="(item, index) in commonConstants.systemParam"
                    :key="index"
                    :title="item.label"
                    class="variable-item df-c"
                  >
                    <div class="overflow-text" style="flex: 1; margin-right: 8px"
                      >{{ item.label }}({{ item.value }})</div
                    >
                    <el-icon title="复制" @click="doCopy(item)"><CopyDocument /></el-icon>
                    <el-icon title="添加" style="margin-left: 4px" @click="doCopy(item, true)"
                      ><CirclePlus
                    /></el-icon>
                  </div>
                </div>
                <div class="variable-warp-title">解析表</div>

                <div class="tablecolumn">
                  <el-select
                    v-model="datasourceTableName"
                    placeholder="请选择解析表"
                    filterable
                    style="margin-bottom: 10px; width: 254px"
                    @change="getTableColumns"
                  >
                    <el-option
                      v-for="op in dataSourceTables"
                      :key="op.value"
                      :label="op.name"
                      :value="op.value"
                    />
                  </el-select>
                  <div class="variable-list analysis-list df">
                    <template v-if="tableColumns.length">
                      <div
                        v-for="(column, index) in tableColumns"
                        :key="index"
                        class="variable-item df-c"
                        :title="column.name"
                      >
                        <div class="overflow-text" style="flex: 1; margin-right: 8px">{{
                          column.name
                        }}</div>
                        <el-dropdown>
                          <el-icon title="复制" style="flex: 1; margin-right: 4px"
                            ><CopyDocument
                          /></el-icon>
                          <template #dropdown>
                            <el-dropdown-menu>
                              <el-dropdown-item @click="getWhereByColumn(1, column)"
                                >仅字段</el-dropdown-item
                              >
                              <el-dropdown-item @click="getWhereByColumn(2, column)"
                                >表名.字段</el-dropdown-item
                              >
                              <el-dropdown-item @click="getWhereByColumn(3, column)"
                                >查询条件(=)</el-dropdown-item
                              >
                              <el-dropdown-item @click="getWhereByColumn(4, column)"
                                >查询条件(in)</el-dropdown-item
                              >
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown>
                        <el-dropdown>
                          <el-icon title="添加"><Plus /></el-icon>
                          <template #dropdown>
                            <el-dropdown-menu>
                              <el-dropdown-item @click="getWhereByColumn(1, column, true)"
                                >仅字段</el-dropdown-item
                              >
                              <el-dropdown-item @click="getWhereByColumn(2, column, true)"
                                >表名.字段</el-dropdown-item
                              >
                              <el-dropdown-item @click="getWhereByColumn(3, column, true)"
                                >查询条件(=)</el-dropdown-item
                              >
                              <el-dropdown-item @click="getWhereByColumn(4, column, true)"
                                >查询条件(in)</el-dropdown-item
                              >
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown>
                      </div>
                    </template>
                    <el-empty
                      v-else
                      style="margin: 0 auto"
                      :image-size="60"
                      description="暂无字段"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div class="sql-content">
              <div v-if="datasourceType == 1" style="height: 25px">
                <el-tooltip
                  content="该操作将执行sql语句并校验sql语句的正确性，并将查询字段全部显示到下方的表格中"
                  placement="bottom"
                  ><el-tag type="success" @click="execSql" style="cursor: pointer"
                    ><el-icon><VideoPlay /></el-icon>执行</el-tag
                  ></el-tooltip
                >
                <el-tooltip content="该操作会将sql语句进行格式化并显示" placement="right"
                  ><el-tag @click="formatSql" style="cursor: pointer"
                    ><el-icon><Document /></el-icon>格式化</el-tag
                  >
                </el-tooltip>
                <el-tooltip content="该操作会插入注释标签" placement="right"
                  ><el-tag @click="addComment(' <!--  -->')" type="warning" style="cursor: pointer"
                    ><el-icon><Plus /></el-icon>添加注释</el-tag
                  >
                </el-tooltip>
                <el-dropdown v-if="paramTableData.tableData && paramTableData.tableData.length > 0">
                  <el-tag type="danger" style="cursor: pointer"
                    ><el-icon title="添加"><Plus /></el-icon>添加参数</el-tag
                  >
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item
                        v-for="(row, index) in paramTableData.tableData"
                        :key="index"
                        @click="getWhereByParam(row)"
                        >{{ row.paramCode }}</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <div v-if="datasourceType == 1" style="height: 300px">
                <div style="height: 100%; width: 100%">
                  <codemirror
                    ref="codeMirror"
                    :options="cmOptions"
                    v-model:value="sqlText"
                  ></codemirror>
                </div>
              </div>
              <div class="table-warp">
                <!--表格 start-->
                <div class="table-title">执行结果</div>
                <el-table
                  :data="
                    sqlColumnTableData.tableData.slice(
                      (sqlColumnTableData.tablePage.currentPage - 1) *
                        sqlColumnTableData.tablePage.pageSize,
                      sqlColumnTableData.tablePage.currentPage *
                        sqlColumnTableData.tablePage.pageSize
                    )
                  "
                  border
                  style="width: 100%"
                  align="center"
                  height="230px"
                  :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
                >
                  <el-table-column width="72" label="序号" align="center">
                    <template #default="scope">
                      <span>{{
                        (sqlColumnTableData.tablePage.currentPage - 1) *
                          sqlColumnTableData.tablePage.pageSize +
                        scope.$index +
                        1
                      }}</span>
                    </template>
                  </el-table-column>

                  <el-table-column prop="columnName" label="列名" align="center" />
                  <el-table-column prop="name" label="别名" align="center" />
                  <el-table-column prop="dataType" label="数据类型" align="center" />
                  <el-table-column prop="width" label="宽度" align="center" />
                  <el-table-column prop="remark" label="注释" align="center" />
                </el-table>
                <!--表格 end-->
                <!--分页 start-->
                <!-- <el-pagination
                  @current-change="handleCurrentChange"
                  @size-change="handleSizeChange"
                  :current-page="sqlColumnTableData.tablePage.currentPage"
                  :page-sizes="sqlColumnTableData.tablePage.pageSizeRange"
                  :page-size="sqlColumnTableData.tablePage.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="sqlColumnTableData.tablePage.pageTotal"
                >
                </el-pagination> -->
                <!--分页 end-->
              </div>
            </div>
          </div>
        </div>
        <!-- 参数配置 -->
        <div v-show="addDatasetType == 2" class="parameter-content">
          <div v-show="sqlForm.sqlType == 1 || datasourceType == 2" style="margin-bottom: 20px">
            <div class="parameter-warp">
              <div class="warp-title">字段参数</div>

              <el-form label-position="right" :model="paramForm" class="df-form" ref="paramRef">
                <el-form-item
                  label="参数名称"
                  prop="paramName"
                  :rules="filter_rules('参数名称', { required: true })"
                >
                  <el-input v-model="paramForm.paramName" placeholder="参数名称"></el-input>
                </el-form-item>
                <el-form-item
                  label="参数编码"
                  prop="paramCode"
                  :rules="filter_rules('参数编码', { required: true })"
                >
                  <el-input v-model="paramForm.paramCode" placeholder="参数编码"></el-input>
                </el-form-item>
                <el-form-item
                  label="参数前缀"
                  v-if="datasourceType == 2"
                  prop="paramPrefix"
                  :rules="filter_rules('参数前缀', { required: false })"
                >
                  <el-input v-model="paramForm.paramPrefix" placeholder="参数前缀"></el-input>
                </el-form-item>
                <el-form-item
                  label="参数类型"
                  prop="paramType"
                  :rules="filter_rules('参数类型', { required: true })"
                >
                  <el-select v-model="paramForm.paramType" placeholder="参数类型">
                    <el-option label="字符串" value="varchar"></el-option>
                    <el-option label="数值" value="number"></el-option>
                    <el-option label="日期" value="date"></el-option>
                    <el-option label="下拉单选" value="select"></el-option>
                    <el-option label="下拉多选" value="mutiselect"></el-option>
                    <el-option label="下拉树(单选)" value="treeSelect"></el-option>
                    <el-option label="下拉树(多选)" value="multiTreeSelect"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  v-if="paramForm.paramType == 'date'"
                  label="日期格式"
                  prop="dateFormat"
                  :rules="filter_rules('日期格式', { required: false })"
                >
                  <el-select v-model="paramForm.dateFormat" placeholder="日期格式">
                    <el-option label="年" value="YYYY"></el-option>
                    <el-option label="年-月" value="YYYY-MM"></el-option>
                    <el-option label="年-月-日" value="YYYY-MM-DD"></el-option>
                    <el-option label="年-月-日 时:分" value="YYYY-MM-DD HH:mm"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="默认值">
                  <el-input v-model="paramForm.paramDefault" placeholder="默认值"></el-input>
                </el-form-item>
                <el-form-item
                  label="是否必填"
                  prop="paramRequired"
                  :rules="filter_rules('是否必填', { required: true })"
                >
                  <el-select v-model="paramForm.paramRequired" placeholder="是否必填">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="是否隐藏"
                  prop="paramHidden"
                  :rules="filter_rules('是否隐藏', { required: true })"
                  key="paramHidden"
                >
                  <el-select v-model="paramForm.paramHidden" placeholder="是否隐藏">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  v-if="paramForm.paramType == 'select' || paramForm.paramType == 'mutiselect'"
                  label="选择内容来源"
                  prop="selectType"
                  key="selectType"
                  :rules="filter_rules('选择内容来源', { required: true })"
                >
                  <el-select
                    v-model="paramForm.selectType"
                    placeholder="选择内容来源"
                    @change="changeSlectType"
                  >
                    <el-option label="自定义" value="1"></el-option>
                    <el-option label="sql语句" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  v-if="
                    (paramForm.paramType == 'select' && paramForm.selectType == '2') ||
                    (paramForm.paramType == 'mutiselect' && paramForm.selectType == '2') ||
                    paramForm.paramType == 'treeSelect' ||
                    paramForm.paramType == 'multiTreeSelect'
                  "
                  label="选择数据源"
                  prop="datasourceId"
                  :rules="filter_rules('选择数据源', { required: true })"
                >
                  <el-select v-model="paramForm.datasourceId" placeholder="选择数据源">
                    <el-option
                      v-for="op in dataSource"
                      :label="op.name"
                      :value="op.id"
                      :key="op.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  v-if="paramForm.paramType == 'select' && paramForm.selectType == '2'"
                  label="是否依赖其他参数"
                  prop="isRelyOnParams"
                  key="isRelyOnParams"
                  :rules="filter_rules('是否依赖其他参数', { required: true })"
                >
                  <el-select v-model="paramForm.isRelyOnParams" placeholder="是否依赖其他参数">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  v-if="
                    paramForm.paramType == 'select' &&
                    paramForm.selectType == '2' &&
                    paramForm.isRelyOnParams == '1'
                  "
                  label="依赖参数代码"
                  prop="relyOnParams"
                  key="relyOnParams"
                  :rules="filter_rules('依赖参数代码', { required: true })"
                >
                  <el-input
                    v-model="paramForm.relyOnParams"
                    placeholder="依赖参数代码,多个用,分隔"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  v-if="paramForm.paramType == 'multiTreeSelect'"
                  label="父子联动"
                  prop="checkStrictly"
                  key="checkStrictly"
                  :rules="filter_rules('父子联动', { required: true })"
                >
                  <el-select v-model="paramForm.checkStrictly" placeholder="选择父子联动">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  v-if="
                    paramForm.paramType == 'select' ||
                    paramForm.paramType == 'mutiselect' ||
                    paramForm.paramType == 'treeSelect' ||
                    paramForm.paramType == 'multiTreeSelect'
                  "
                  label="下拉选择内容"
                  key="selectContent"
                  prop="selectContent"
                  :rules="filter_rules('下拉选择内容', { required: true })"
                >
                  <el-input
                    type="textarea"
                    :cols="80"
                    v-model="paramForm.selectContent"
                    placeholder="下拉选择内容"
                  ></el-input>
                  <!-- <div class="sub-title">{{ selectContentSuggestion }}</div> -->
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="addParam">添加</el-button>
                </el-form-item>
              </el-form>
              <div>
                <el-link
                  v-if="paramForm.paramType == 'date'"
                  :underline="false"
                  type="warning"
                  href="https://gitee.com/springreport/springreport/wikis/pages?sort_id=13973093&doc_id=5747656"
                  target="_blank"
                  >点击查看日期默认值设置规则</el-link
                >
                <el-tag
                  v-if="paramForm.paramType == 'select' || paramForm.paramType == 'mutiselect'"
                  type="warning"
                  >自定义数据格式：[{"value":"value1","name":"name1"},{"value":"value2","name":"name2"}]
                  注意：两个key必须是value 和 name</el-tag
                ><br
                  v-if="paramForm.paramType == 'select' || paramForm.paramType == 'mutiselect'"
                />
                <el-tag
                  v-if="paramForm.paramType == 'select' || paramForm.paramType == 'mutiselect'"
                  type="warning"
                  >sql语句格式：select code as value, name as name from table
                  注意：返回的属性中必须有 value 和 name</el-tag
                >
                <el-tag
                  v-if="
                    paramForm.paramType == 'treeSelect' || paramForm.paramType == 'multiTreeSelect'
                  "
                  type="warning"
                  >sql语句格式：select deptId as id, deptName as name,parentId as pid from table
                  注意：返回的属性中必须有 id,name和pid</el-tag
                >
              </div>
            </div>
            <div style="height: 50%">
              <!--表格 start-->
              <el-table
                :data="paramTableData.tableData"
                border
                style="width: 98%"
                align="center"
                height="230px"
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
              >
                <el-table-column prop="paramName" label="参数名" align="center"></el-table-column>
                <el-table-column prop="paramCode" label="参数编码" align="center"></el-table-column>
                <el-table-column prop="paramType" label="参数类型" align="center"></el-table-column>
                <el-table-column
                  prop="paramDefault"
                  label="默认值"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="paramRequired"
                  label="是否必填"
                  align="center"
                  :formatter="commonUtil.formatterTableValue"
                ></el-table-column>
                <el-table-column
                  prop="paramHidden"
                  label="是否隐藏"
                  align="center"
                  :formatter="commonUtil.formatterTableValue"
                ></el-table-column>
                <el-table-column
                  prop="isRelyOnParams"
                  label="是否依赖其他参数"
                  align="center"
                  :formatter="commonUtil.formatterTableValue"
                ></el-table-column>
                <el-table-column
                  prop="relyOnParams"
                  label="依赖参数"
                  align="center"
                ></el-table-column>
                <el-table-column label="操作" align="center">
                  <template #default="scope">
                    <el-button @click="editParam(scope.row)" type="primary" text>编辑</el-button>
                    <el-button @click="moveUp(scope.$index, '3')" type="primary" text
                      >上移</el-button
                    >
                    <el-button @click="moveDown(scope.$index, '3')" type="primary" text
                      >下移</el-button
                    >
                    <el-button @click="deleteParam(scope.$index)" type="primary" text
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <!--表格 end-->
            </div>
          </div>
          <div v-show="sqlForm.sqlType == 2 && datasourceType == 1" style="margin-bottom: 20px">
            <div class="parameter-warp">
              <div class="warp-title">输入参数</div>

              <el-form
                label-position="right"
                :model="procedureParamForm"
                class="df-form"
                ref="inParamRef"
              >
                <el-form-item
                  label="参数名称"
                  prop="paramName"
                  :rules="filter_rules('参数名称', { required: true })"
                >
                  <el-input
                    v-model="procedureParamForm.paramName"
                    placeholder="参数名称"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="参数编码"
                  prop="paramCode"
                  :rules="filter_rules('参数编码', { required: true })"
                >
                  <el-input
                    v-model="procedureParamForm.paramCode"
                    placeholder="参数编码"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="参数类型"
                  prop="paramType"
                  :rules="filter_rules('参数类型', { required: true })"
                >
                  <el-select v-model="procedureParamForm.paramType" placeholder="参数类型">
                    <el-option label="int" value="int"></el-option>
                    <el-option label="String" value="String"></el-option>
                    <el-option label="Long" value="Long"></el-option>
                    <el-option label="BigDecimal" value="BigDecimal"></el-option>
                    <el-option label="Double" value="Double"></el-option>
                    <el-option label="Float" value="Float"></el-option>
                    <el-option label="Date" value="Date"></el-option>
                    <el-option label="DateTime" value="DateTime"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="默认值"
                  prop="paramDefault"
                  :rules="filter_rules('默认值', { required: false })"
                >
                  <el-input
                    v-model="procedureParamForm.paramDefault"
                    placeholder="默认值"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="是否必填"
                  prop="paramRequired"
                  :rules="filter_rules('是否必填', { required: true })"
                >
                  <el-select v-model="procedureParamForm.paramRequired" placeholder="是否必填">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  v-if="
                    procedureParamForm.paramType != 'Date' &&
                    procedureParamForm.paramType != 'DateTime'
                  "
                  label="组件类型"
                  prop="componentType"
                  :rules="filter_rules('组件类型', { required: true })"
                >
                  <el-select v-model="procedureParamForm.componentType" placeholder="组件类型">
                    <el-option label="输入框" value="input"></el-option>
                    <el-option label="下拉单选" value="select"></el-option>
                    <el-option label="下拉多选" value="mutiselect"></el-option>
                    <el-option label="下拉树(单选)" value="treeSelect"></el-option>
                    <el-option label="下拉树(多选)" value="multiTreeSelect"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  v-if="
                    procedureParamForm.paramType != 'Date' &&
                    procedureParamForm.paramType != 'DateTime' &&
                    (procedureParamForm.componentType == 'select' ||
                      procedureParamForm.componentType == 'mutiselect')
                  "
                  label="选择内容来源"
                  key="selectType"
                  prop="selectType"
                  :rules="filter_rules('选择内容来源', { required: true })"
                >
                  <el-select v-model="procedureParamForm.selectType" placeholder="选择内容来源">
                    <el-option label="自定义" value="1"></el-option>
                    <el-option label="sql语句" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  v-if="
                    procedureParamForm.paramType != 'Date' &&
                    procedureParamForm.paramType != 'DateTime' &&
                    ((procedureParamForm.componentType == 'select' &&
                      procedureParamForm.selectType == '2') ||
                      (procedureParamForm.componentType == 'mutiselect' &&
                        procedureParamForm.selectType == '2') ||
                      procedureParamForm.componentType == 'treeSelect' ||
                      procedureParamForm.componentType == 'multiTreeSelect')
                  "
                  label="选择数据源"
                  prop="datasourceId"
                  :rules="filter_rules('选择数据源', { required: true })"
                >
                  <el-select v-model="procedureParamForm.datasourceId" placeholder="选择数据源">
                    <el-option
                      v-for="op in dataSource"
                      :label="op.name"
                      :value="op.id"
                      :key="op.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  v-if="
                    procedureParamForm.paramType != 'Date' &&
                    procedureParamForm.paramType != 'DateTime' &&
                    procedureParamForm.componentType == 'select' &&
                    procedureParamForm.selectType == '2'
                  "
                  label="是否依赖其他参数"
                  prop="isRelyOnParams"
                  key="isRelyOnParams"
                  :rules="filter_rules('是否依赖其他参数', { required: true })"
                >
                  <el-select
                    v-model="procedureParamForm.isRelyOnParams"
                    placeholder="是否依赖其他参数"
                  >
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  v-if="
                    procedureParamForm.paramType != 'Date' &&
                    procedureParamForm.paramType != 'DateTime' &&
                    procedureParamForm.componentType == 'multiTreeSelect'
                  "
                  label="父子联动"
                  prop="checkStrictly"
                  key="checkStrictly"
                  :rules="filter_rules('父子联动', { required: true })"
                >
                  <el-select v-model="procedureParamForm.checkStrictly" placeholder="选择父子联动">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  v-if="
                    procedureParamForm.paramType != 'Date' &&
                    procedureParamForm.paramType != 'DateTime' &&
                    (procedureParamForm.componentType == 'select' ||
                      procedureParamForm.componentType == 'mutiselect' ||
                      procedureParamForm.componentType == 'treeSelect' ||
                      procedureParamForm.componentType == 'multiTreeSelect')
                  "
                  key="selectContent"
                  label="下拉选择内容"
                  prop="selectContent"
                  :rules="filter_rules('下拉选择内容', { required: true })"
                >
                  <el-input
                    type="textarea"
                    :cols="80"
                    v-model="procedureParamForm.selectContent"
                    placeholder="下拉选择内容"
                  ></el-input>
                  <!-- <div class="sub-title">{{ selectContentSuggestion }}</div> -->
                </el-form-item>
                <el-form-item
                  v-if="procedureParamForm.paramType == 'Date'"
                  label="日期格式"
                  prop="dateFormat"
                  :rules="filter_rules('日期格式', { required: false })"
                >
                  <el-select v-model="procedureParamForm.dateFormat" placeholder="日期格式">
                    <el-option label="年" value="YYYY"></el-option>
                    <el-option label="年-月" value="YYYY-MM"></el-option>
                    <el-option label="年-月-日" value="YYYY-MM-DD"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="是否隐藏"
                  prop="paramHidden"
                  :rules="filter_rules('是否隐藏', { required: true })"
                >
                  <el-select v-model="procedureParamForm.paramHidden" placeholder="是否隐藏">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="addInParam">添加</el-button>
                </el-form-item>
              </el-form>
            </div>
            <el-tag
              v-if="
                procedureParamForm.paramType == 'Date' || procedureParamForm.paramType == 'DateTime'
              "
              type="warning"
              >注：当参数类型选择日期时，如果想让默认日期是当前日期，则默认值填写current或者CURRENT，如果想让默认日期是当前日期的天几天或者后几天，则填天数，例如前七天则填写-7，后七天则填写7。</el-tag
            >
            <el-tag
              v-if="
                procedureParamForm.componentType == 'select' ||
                procedureParamForm.componentType == 'mutiselect'
              "
              type="warning"
              >自定义数据格式：[{"value":"value1","name":"name1"},{"value":"value2","name":"name2"}]
              注意：两个key必须是value 和 name</el-tag
            ><br v-if="paramForm.paramType == 'select' || paramForm.paramType == 'mutiselect'" />
            <el-tag
              v-if="
                procedureParamForm.componentType == 'select' ||
                procedureParamForm.componentType == 'mutiselect'
              "
              type="warning"
              >sql语句格式：select code as value, name as name from table 注意：返回的属性中必须有
              value 和 name</el-tag
            >
            <el-tag
              v-if="
                procedureParamForm.componentType == 'treeSelect' ||
                procedureParamForm.componentType == 'multiTreeSelect'
              "
              type="warning"
              >sql语句格式：select deptId as id, deptName as name,parentId as pid from table
              注意：返回的属性中必须有 id,name和pid</el-tag
            >
            <div style="height: 40%">
              <!--表格 start-->
              <el-table
                :data="procedureInParamTableData.tableData"
                border
                style="width: 100%"
                align="center"
                height="230px"
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
              >
                <el-table-column prop="paramName" label="参数名" align="center"></el-table-column>
                <el-table-column prop="paramCode" label="参数编码" align="center"></el-table-column>
                <el-table-column prop="paramType" label="参数类型" align="center"></el-table-column>
                <el-table-column
                  prop="paramDefault"
                  label="默认值"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="paramHidden"
                  label="是否隐藏"
                  align="center"
                  :formatter="commonUtil.formatterTableValue"
                ></el-table-column>
                <el-table-column fixed="right" label="操作" width="180" align="center">
                  <template #default="scope">
                    <el-button @click="editInParam(scope.row)" type="primary" text>编辑</el-button>
                    <el-button @click="moveUp(scope.$index, '1')" type="primary" text
                      >上移</el-button
                    >
                    <el-button @click="moveDown(scope.$index, '1')" type="primary" text
                      >下移</el-button
                    >
                    <el-button @click="deleteInParam(scope.$index)" type="primary" text
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <!--表格 end-->
            </div>
            <el-divider content-position="left">输出参数</el-divider>
            <el-form
              :inline="true"
              :model="procedureOutParamForm"
              class="demo-form-inline"
              ref="outParamRef"
              style="width: 100%"
            >
              <el-form-item
                label="参数名称"
                prop="paramName"
                :rules="filter_rules('参数名称', { required: true })"
              >
                <el-input
                  v-model="procedureOutParamForm.paramName"
                  placeholder="参数名称"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="参数编码"
                prop="paramCode"
                :rules="filter_rules('参数编码', { required: true })"
              >
                <el-input
                  v-model="procedureOutParamForm.paramCode"
                  placeholder="参数编码"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="参数类型"
                prop="paramType"
                :rules="filter_rules('参数类型', { required: true })"
              >
                <el-select
                  v-model="procedureOutParamForm.paramType"
                  style="width: 170px !important"
                  placeholder="参数类型"
                >
                  <el-option label="VARCHAR" value="VARCHAR"></el-option>
                  <el-option label="INTEGER" value="INTEGER"></el-option>
                  <el-option label="BIGINT" value="BIGINT"></el-option>
                  <el-option label="FLOAT" value="FLOAT"></el-option>
                  <el-option label="DOUBLE" value="DOUBLE"></el-option>
                  <el-option label="DECIMAL" value="DECIMAL"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="addOutParam">添加</el-button>
              </el-form-item>
            </el-form>
            <div style="height: 30%">
              <!--表格 start-->
              <el-table
                :data="procedureOutParamTableData.tableData"
                border
                style="width: 100%"
                align="center"
                height="230px"
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
              >
                <el-table-column prop="paramName" label="参数名" align="center"></el-table-column>
                <el-table-column prop="paramCode" label="参数编码" align="center"></el-table-column>
                <el-table-column prop="paramType" label="参数类型" align="center"></el-table-column>
                <el-table-column fixed="right" label="操作" width="180" align="center">
                  <template #default="scope">
                    <el-button @click="editOutParam(scope.row)" type="primary" text>编辑</el-button>
                    <el-button @click="moveUp(scope.$index, '2')" type="primary" text
                      >上移</el-button
                    >
                    <el-button @click="moveDown(scope.$index, '2')" type="primary" text
                      >下移</el-button
                    >
                    <el-button @click="deleteOutParam(scope.$index)" type="primary" text
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <!--表格 end-->
            </div>
          </div>
          <div class="parameter-warp">
            <div class="warp-title">字段参数</div>
            <el-select
              v-model="subParamAttrs"
              placeholder="主表字段"
              multiple
              clearable
              style="width: 220px"
            >
              <el-option
                v-for="op in sqlColumnTableData.tableData"
                :key="op.name"
                :label="op.name"
                :value="op.name"
              />
            </el-select>
          </div>
        </div>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="closeAddDataSet">取 消</el-button>
            <el-button type="primary" @click="addDataSet">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 左侧分组设置 -->
      <el-dialog
        :close-on-click-modal="false"
        title="分组设置"
        v-model="groupSetVisible"
        width="504px"
        @close="closeGroupDialog"
      >
        <div class="group-dialog">
          <div class="df-c-b">
            <div class="title">全部分组（{{ groupList.length }}）</div>
            <el-button size="medium" @click="openGroupHandleDialog()">新增分组</el-button>
          </div>
          <el-table :data="groupList" style="width: 100%; margin-top: 12px">
            <el-table-column prop="name" label="选项" />
            <el-table-column label="操作" width="180">
              <template #default="scope">
                <el-link
                  type="info"
                  style="margin-right: 12px"
                  @click="openGroupHandleDialog(scope.row)"
                  >编辑</el-link
                >
                <el-link type="info" @click="deleteGroup(scope.row.id)">删除</el-link>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
      <!-- 新增编辑分组 -->
      <el-dialog
        :close-on-click-modal="false"
        :title="groupForm.id ? '编辑分组' : '新增分组'"
        v-model="groupHandleVisible"
        width="417px"
        @close="closeGroupHandleDialog"
      >
        <el-input v-model="groupForm.groupName" size="medium" placeholder="请输入" />
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="closeGroupHandleDialog()">取 消</el-button>
            <el-button type="primary" :loading="groupHandleLoading" @click="addOrEditGroup()"
              >确 定</el-button
            >
          </span>
        </template>
      </el-dialog>
      <textarea id="clipboradInput" value="" style="opacity: 0; position: absolute"></textarea>
    </div>
  </ContentWrap>
</template>

<script setup lang="ts">
import { DatasetApi, TplDatasetListReqVO, TplDatasetSaveReqVO } from '@/api/contract/dataset'
import { DatabaseTables, DatasourceApi, DatasourceSaveReqVO } from '@/api/contract/datasource'
import { DirectoryApi } from '@/api/contract/directory'
import { TemplateApi } from '@/api/contract/template'
import { Base64 } from '@/utils/base64'
import {
  CirclePlus,
  CopyDocument,
  Delete,
  Document,
  Edit,
  Plus,
  Search,
  VideoPlay
} from '@element-plus/icons-vue'
import { format } from 'sql-formatter'
import { computed, nextTick, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import {
  DatasetColumns,
  DirData,
  ParamTableData,
  ProcedureInParamTableData,
  ProcedureOutParamTableData
} from './common/commonEntity'
const { query } = useRoute() // 查询参数

import commonUtil from './common/common.js'
import commonConstants from './common/constants.js'
import selectUtil from './common/selectValue.js'
import { filter_rules } from './common/validate.js'

import codemirror from 'codemirror-editor-vue3'
// base style
import 'codemirror/lib/codemirror.css'
// theme css
import 'codemirror/addon/hint/sql-hint'
import 'codemirror/theme/eclipse.css'
// language
import 'codemirror/mode/sql/sql.js'
// active-line.js
import 'codemirror/addon/selection/active-line.js'
// styleSelectedText
import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/selection/mark-selection.js'
// highlightSelectionMatches
import 'codemirror/addon/scroll/annotatescrollbar.js'
import 'codemirror/addon/search/match-highlighter.js'
import 'codemirror/addon/search/matchesonscrollbar.js'
import 'codemirror/addon/search/searchcursor.js'

// keyMap
import 'codemirror/addon/comment/comment.js'
import 'codemirror/addon/dialog/dialog.css'
import 'codemirror/addon/dialog/dialog.js'
import 'codemirror/addon/edit/matchbrackets.js'
import 'codemirror/addon/search/search.js'
import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/keymap/sublime.js'
import 'codemirror/mode/clike/clike.js'

// foldGutter
import 'codemirror/addon/fold/brace-fold.js'
import 'codemirror/addon/fold/comment-fold.js'
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/indent-fold.js'
import 'codemirror/addon/fold/markdown-fold.js'

defineOptions({ name: 'DocDesign' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const route = useRoute()

const canvasEditorRef = ref()

const groupSetVisible = ref(false)
const datasetKeyword = ref('') // 合同搜索
const dataGroupLoading = ref(false) // 数据集分组loading
const datasetItemActive = ref<Partial<TplDatasetSaveReqVO>>({})

const displayGroupList = computed(() => {
  if (datasetKeyword.value) {
    return groupList.value
      .map((group) => ({
        ...group,
        data: group.data.filter((item) => item.datasetName.includes(datasetKeyword.value))
      }))
      .filter((group) => group.data.length > 0) // 只保留有匹配项的组
  } else {
    return groupList.value
  }
})

const groupList = ref<Array<DirData>>([])
const groupHandleVisible = ref(false) // 新增、编辑分组
const groupHandleLoading = ref(false) // 新增、编辑分组loading
const groupForm = ref({
  groupName: undefined,
  id: undefined
})

// 关闭分组设置弹框
const closeGroupDialog = () => {
  groupSetVisible.value = false
}
// 打开分组编辑、添加弹框
const openGroupHandleDialog = (item?: any) => {
  groupHandleVisible.value = true
  groupForm.value = {
    groupName: item ? item.name : undefined,
    id: item ? item.id : undefined
  }
}
// 删除分组
const deleteGroup = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await DirectoryApi.delete(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    getTplGroupDatasets()
  } catch {}
}
// 关闭分组编辑、添加弹框
const closeGroupHandleDialog = () => {
  groupHandleVisible.value = false
}
// 添加或编辑分组
const addOrEditGroup = async () => {
  const groupFormValue = groupForm.value
  if (!groupFormValue.groupName) {
    message.error('请输入分组名称')
    return
  }
  groupHandleLoading.value = true
  const reportTplId = Number(route.query.tplId) || null // reportTplId
  const id = Number(route.query.id) || null
  const params = { tplId: id, name: groupFormValue.groupName, type: 2 }
  if (groupFormValue.id) {
    await DirectoryApi.update(params)
    message.success(t('common.createSuccess'))
  } else {
    await DirectoryApi.create(params)
    message.success(t('common.updateSuccess'))
  }
  groupHandleLoading.value = false
  getTplGroupDatasets()
  groupHandleVisible.value = false
}

// 获取目录
const getTplGroupDatasets = async () => {
  dataGroupLoading.value = true
  try {
    const reportTplId = Number(route.query.id) || null // reportTplId
    const { list } = await TemplateApi.getDirPage({ type: 2, tplId: reportTplId })
    // groupList.value = list;
    const merged = [...groupList.value]
    list.forEach((item2) => {
      const index = merged.findIndex((item1) => item1.id === item2.id)
      if (index !== -1) {
        merged[index] = { ...merged[index], ...item2 } // 合并属性
      } else {
        merged.push(item2) // 添加新项
      }
      // console.log(merged,'merged')
      groupList.value = merged
    })
    dataGroupLoading.value = false
  } catch (error) {
    dataGroupLoading.value = false
  }
}

const filedKeyword = ref('') // 检索所选报表内字段
const filedLoading = ref(false)
const datasetColumnList = ref<Array<DatasetColumns>>([])
const displayFields = computed(() => {
  if (filedKeyword.value) {
    return datasetColumnList.value.filter((item: DatasetColumns) =>
      item.columnName?.includes(filedKeyword.value)
    )
  } else {
    return datasetColumnList.value
  }
})

const addDatasetsDialogVisiable = ref(false) // 数据集弹窗
const datasets = ref<Array<TplDatasetListReqVO>>([])
const sqlText = ref('')
const datasourceType = ref(1) // 1数据库 2api
const cmOptions = ref({
  // codemirror参数配置
  tabSize: 4,
  mode: { name: 'text/x-mysql' },
  theme: 'eclipse',
  styleActiveLine: true,
  lineNumbers: true,
  line: true,
  foldgutter: true,
  gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
  lineWrapping: true, // 代码折叠
  foldGutter: true,
  matchBrackets: true, // 括号匹配
  autoCloseBrackets: true
})
const sqlRef = ref()
const paramRef = ref()
const sqlForm = ref({
  datasetName: '',
  datasourceId: undefined,
  id: undefined,
  sqlType: 1,
  dirId: undefined,
  isCommon: 2,
  isConvert: 2,
  headerName: '',
  valueField: '',
  fixedColumn: []
})
const paramForm = ref({
  paramName: '', // 参数名称
  paramCode: '', // 参数编码
  paramType: '', // 参数类型
  dateFormat: '', //日期类型
  paramDefault: '', // 默认值
  paramRequired: '', // 是否必选
  selectContent: '', // 下拉选择内容
  selectType: '', // 内容来源
  isRelyOnParams: '', // 是否依赖其他参数
  relyOnParams: '', // 依赖参数代码
  paramHidden: '', //是否隐藏 1是 2否
  checkStrictly: '', //父子联动 1是 2否
  paramPrefix: '', //参数前缀
  datasourceId: '' //数据源id
})
// sql解析对应的列表格数据
const sqlColumnTableData = ref({
  tableData: [],
  tablePage: {
    currentPage: 1,
    pageSize: 10,
    pageTotal: 0,
    pageSizeRange: [5, 10, 20, 50]
  }
})
const paramTableData = ref<ParamTableData>({
  tableData: [],
  tablePage: {
    currentPage: 1,
    pageSize: 10,
    pageTotal: 0,
    pageSizeRange: [5, 10, 20, 50]
  }
})
const subParamAttrs = ref([]) //主表传递给子表的参数属性
const procedureInParamTableData = ref<ProcedureInParamTableData>({
  tableData: [],
  tablePage: {
    currentPage: 1,
    pageSize: 10,
    pageTotal: 0,
    pageSizeRange: [5, 10, 20, 50]
  }
})
const procedureOutParamTableData = ref<ProcedureOutParamTableData>({
  tableData: [],
  tablePage: {
    currentPage: 1,
    pageSize: 10,
    pageTotal: 0,
    pageSizeRange: [5, 10, 20, 50]
  }
})
const procedureParamForm = ref({
  paramName: '', // 参数名称
  paramCode: '', // 参数编码
  paramType: '', // 参数类型
  paramDefault: '', // 默认值
  paramHidden: '', //是否隐藏
  componentType: '',
  selectType: '',
  datasourceId: '',
  isRelyOnParams: '',
  checkStrictly: '',
  selectContent: '',
  dateFormat: '',
  paramRequired: ''
})

const procedureOutParamForm = ref({
  paramName: '', // 参数名称
  paramCode: '', // 参数编码
  paramType: '', // 参数类型
  paramDefault: ''
})

const inParamRef = ref()
const outParamRef = ref()

const addDatasetType = ref(1)
const dataSource = ref<Array<DatasourceSaveReqVO>>([]) // 模板数据源
const selectVariableOpen = ref(true) // 数据集选择变量展开

const datasourceTableName = ref('')
const datasourceTableColumns = {} //表对应的列
const tableColumns = ref<Array<DatabaseTables>>([])
const dataSourceTables = ref<Array<DatabaseTables>>([])

// 添加数据集
const addDataSets = () => {
  addDatasetsDialogVisiable.value = true
  nextTick(() => {
    sqlText.value = ' '
  })
}
// 关闭添加数据源
const closeAddDataSet = () => {
  addDatasetsDialogVisiable.value = false
  if (datasourceType.value == 1) {
    sqlText.value = ' '
  }

  sqlRef.value.resetFields() // 校验重置
  paramRef.value.resetFields() // 校验重置

  commonUtil.clearObj(sqlForm.value)
  commonUtil.clearObj(paramForm.value)

  sqlColumnTableData.value.tableData = []
  sqlColumnTableData.value.tablePage.currentPage = 1
  sqlColumnTableData.value.tablePage.pageTotal = 0
  paramTableData.value.tableData = []
  paramTableData.value.tablePage.currentPage = 1
  paramTableData.value.tablePage.pageTotal = 0
  datasourceType.value = 1
}
// 获取模板关联的数据源
const getReportTplDateSource = async (isEdit?: boolean) => {
  const { list } = await DatasourceApi.getPage({})
  dataSource.value = list
  changeDatasource(isEdit)
}
// 选择数据源修改
const changeDatasource = (isEdit?: boolean) => {
  for (let index = 0; index < dataSource.value.length; index++) {
    const element = dataSource.value[index]
    if (sqlForm.value.datasourceId == element.id) {
      if (isEdit) {
        sqlColumnTableData.value.tableData = []
      }
      if (element.type === 4) {
        datasourceType.value = 2
        if (element.apiColumns) {
          const columns = JSON.parse(element.apiColumns)
          if (columns.length > 0) {
            for (let idx = 0; idx < columns.length; idx++) {
              const col = columns[idx]
              // const obj = {
              //   columnName: element.propName,
              //   name: element.propCode
              // }
              // sqlColumnTableData.value.tableData.push(obj)
            }
          }
        }
      } else {
        datasourceType.value = 1
        // 假设 getDataBasetables 是另一个方法，需在 setup 中定义或引入
        getDatabaseTables()
      }
      break
    }
  }
}

// 编辑数据集方法
const editDataSet = async (dataSet) => {
  addDatasetsDialogVisiable.value = true
  nextTick(() => {
    sqlText.value = dataSet.tplSql
  })

  paramTableData.value.tableData = JSON.parse(dataSet.tplParam || '[]')
  sqlColumnTableData.value.tableData = dataSet.columns || []

  sqlColumnTableData.value.tablePage.pageTotal = dataSet.columns?.length || 0

  // 表单赋值
  sqlForm.value.datasetName = dataSet.datasetName
  sqlForm.value.datasourceId = dataSet.datasourceId
  sqlForm.value.id = dataSet.id
  sqlForm.value.sqlType = dataSet.sqlType
  sqlForm.value.dirId = dataSet.dirId
  sqlForm.value.isCommon = dataSet.isCommon
  sqlForm.value.isConvert = dataSet.isConvert
  sqlForm.value.valueField = dataSet.valueField
  sqlForm.value.headerName = dataSet.headerName

  // 处理特殊格式字段
  sqlForm.value.fixedColumn =
    typeof dataSet.fixedColumn === 'string'
      ? JSON.parse(dataSet.fixedColumn)
      : dataSet.fixedColumn || []

  subParamAttrs.value = dataSet.subParamAttrs ? JSON.parse(dataSet.subParamAttrs) : []

  // 存储过程参数处理
  if (dataSet.sqlType === 2) {
    procedureInParamTableData.value.tableData = JSON.parse(dataSet.inParam || '[]')
    procedureOutParamTableData.value.tableData = JSON.parse(dataSet.outParam || '[]')
  }

  getReportTplDateSource(true)
  if (!dataSet.columns || dataSet.columns.length === 0) {
    getDatasetColumns(dataSet, null, true)
  }
}

// 删除数据集
const deleteDataSet = async (dataSet) => {
  await DatasetApi.delete(dataSet.id)
  message.success('删除成功')
}
// 获取数据源的表结构方法
const getDatabaseTables = async () => {
  datasourceTableName.value = ''
  tableColumns.value = []
  const data = await DatasourceApi.getDatabaseTables({ id: sqlForm.value.datasourceId })
  dataSourceTables.value = data
}

const doCopy = (item, isInsert?: any) => {
  let text = item.value
  if (item.type == 'number') {
    text = '<if test="' + item.value + '!=null' + '"> \n'
    text = text + '  and ' + item.column + ' = #{' + item.value + '} \n' + '</if>'
  } else {
    text = '<if test="' + item.value + '!=null and ' + item.value + "!=''" + '">\n'
    text = text + '  and ' + item.column + ' = #{' + item.value + '} \n' + '</if>'
  }
  if (!isInsert) {
    const input = document.getElementById('clipboradInput') // 承载复制内容
    input.value = text // 修改文本框的内容
    input.select() // 选中文本
    document.execCommand('copy') // 执行浏览器复制命令
    message.success('复制成功')
    console.log('复制成功')
  } else {
    addComment(text)
  }
}
const addComment = (val) => {
  if (codeMirror.value) {
    // 获取 CodeMirror 实例的 cursor（光标位置）
    const pos1 = codeMirror.value.cminstance.getCursor()
    let pos2 = {
      line: pos1.line,
      ch: pos1.ch
    }
    // pos2.line = pos1.line;
    // pos2.ch = pos1.ch;
    // 在指定光标位置替换内容（插入注释等操作）
    codeMirror.value.cminstance.replaceRange(val, pos2)
  }
}
const getWhereByColumn = (type, column, isInsert?: any) => {
  let text = ''
  let columnType = column.dataType.toLowerCase()
  if (type == 1) {
    text = column.name
  } else if (type == 2) {
    text = datasourceTableName.value + '.' + column.name
  } else if (type == 3) {
    if (columnType.indexOf('varchar') >= 0) {
      text = '<if test="' + column.name + '!=null and ' + column.name + "!=''" + '">\n'
      text = text + '  and ' + column.name + ' = #{' + column.name + '} \n' + '</if>'
    } else if (
      columnType.indexOf('int') >= 0 ||
      columnType.indexOf('number') >= 0 ||
      columnType.indexOf('date') >= 0 ||
      columnType.indexOf('time') >= 0
    ) {
      text = '<if test="' + column.name + '!=null' + '"> \n'
      text = text + '  and ' + column.name + ' = #{' + column.name + '} \n' + '</if>'
    } else {
      text = '<if test="' + column.name + '!=null and ' + column.name + "!=''" + '">\n'
      text = text + '  and ' + column.name + ' = #{' + column.name + '} \n' + '</if>'
    }
  } else if (type == 4) {
    text = '<if test="' + column.name + '!=null and ' + column.name + '.size() > 0' + '">\n'
    text = text + '  and ' + column.name + ' in\n'
    text =
      text +
      ' <foreach collection="' +
      column.name +
      '" open="(" separator="," close=")" item="item" index="index">\n #{item} \n</foreach>\n</if>'
  } else {
    text = '<if test="' + column.name + '!=null and ' + column.name + "!=''" + '">\n'
    text = text + '  and ' + column.name + ' = #{' + column.name + '} \n' + '</if>'
  }
  if (isInsert) {
    addComment(text)
  } else {
    const input = document.getElementById('clipboradInput') // 承载复制内容
    input.value = text // 修改文本框的内容
    input.select() // 选中文本
    document.execCommand('copy') // 执行浏览器复制命令
    message.success('复制成功')
    // this.commonUtil.showMessage({
    //   message: '复制成功',
    //   type: this.commonConstants.messageType.success,
    // });
  }
}
const getWhereByParam = (row) => {
  let text = ''
  if (row.paramType == 'varchar' || row.paramType == 'select' || row.paramType == 'treeSelect') {
    text = '<if test="' + row.paramCode + '!=null and ' + row.paramCode + "!=''" + '">\n'
    text = text + '  and ' + row.paramCode + ' = #{' + row.paramCode + '} \n' + '</if>'
  } else if (row.paramType == 'number' || row.paramType == 'date') {
    text = '<if test="' + row.paramCode + '!=null' + '"> \n'
    text = text + '  and ' + row.paramCode + ' = #{' + row.paramCode + '} \n' + '</if>'
  } else if (row.paramType == 'mutiselect' || row.paramType == 'multiTreeSelect') {
    text = '<if test="' + row.paramCode + '!=null and ' + row.paramCode + '.size() > 0' + '">\n'
    text = text + '  and ' + row.paramCode + ' in\n'
    text =
      text +
      '   <foreach collection="' +
      row.paramCode +
      '" open="(" separator="," close=")" item="item" index="index">\n   #{item} \n  </foreach>\n</if>'
  }
  addComment(text)
}
const execSql = async () => {
  // 调用表单的校验方法，对应原 this.$refs['sqlRef'].validate
  sqlRef.value.validate(async (valid) => {
    if (valid) {
      const data = await DatasourceApi.execSql({
        tplId: Number(query.id),
        // tplSql: Base64.encode(sqlText.value),
        tplSql: Base64.encode('kZSwK2203' + Base64.encode(sqlText.value) + 'uBwLnByb'),
        useBase64: true,
        datasourceId: sqlForm.value.datasourceId,
        sqlType: sqlForm.value.sqlType,
        inParam: procedureInParamTableData.value.tableData
          ? JSON.stringify(procedureInParamTableData.value.tableData)
          : '',
        outParam: procedureOutParamTableData.value.tableData
          ? JSON.stringify(procedureOutParamTableData.value.tableData)
          : '',
        sqlParams: paramTableData.value.tableData
          ? JSON.stringify(paramTableData.value.tableData)
          : ''
      })
      sqlColumnTableData.value.tableData = data
      //     sqlColumnTableData.value.tableData = response.responseData;
      //     sqlColumnTableData.value.tablePage.pageTotal = response.responseData.length;
    }
  })
}
const formatSql = () => {
  // sql格式化
  let sqlContent = ''
  sqlContent = sqlText.value
  sqlText.value = format(sqlContent)
}

const changeSlectType = () => {}
// sql语句列表修改当前页触发事件
const handleCurrentChange = (val) => {
  sqlColumnTableData.value.tablePage.currentPage = val
}
// sql语句列表修改当每页显示条数触发事件
const handleSizeChange = (val) => {
  sqlColumnTableData.value.tablePage.pageSize = val
}

// 添加参数方法
const addParam = () => {
  paramRef.value.validate((valid) => {
    if (valid) {
      // 查找参数是否已存在
      const result = commonUtil.getItemIndexFromList(
        paramTableData.value.tableData,
        'paramCode',
        paramForm.value.paramCode
      )
      if (result.index >= 0) {
        // 更新已存在的参数
        const item = paramTableData.value.tableData[result.index]
        Object.assign(item, {
          paramName: paramForm.value.paramName,
          paramType: paramForm.value.paramType,
          dateFormat: paramForm.value.dateFormat,
          paramDefault: paramForm.value.paramDefault,
          paramRequired: paramForm.value.paramRequired,
          selectType: paramForm.value.selectType,
          selectContent: paramForm.value.selectContent,
          isRelyOnParams:
            paramForm.value.isRelyOnParams === '' ? '2' : paramForm.value.isRelyOnParams,
          relyOnParams: paramForm.value.relyOnParams,
          paramHidden: paramForm.value.paramHidden,
          checkStrictly: paramForm.value.checkStrictly === '' ? '' : paramForm.value.checkStrictly,
          paramPrefix: paramForm.value.paramPrefix,
          datasourceId: paramForm.value.datasourceId
        })
      } else {
        // 添加新参数
        paramTableData.value.tableData.push({
          paramName: paramForm.value.paramName,
          paramCode: paramForm.value.paramCode,
          paramType: paramForm.value.paramType,
          dateFormat: paramForm.value.dateFormat,
          paramDefault: paramForm.value.paramDefault,
          paramRequired: paramForm.value.paramRequired,
          selectType: paramForm.value.selectType,
          selectContent: paramForm.value.selectContent,
          isRelyOnParams:
            paramForm.value.isRelyOnParams === '' ? '2' : paramForm.value.isRelyOnParams,
          relyOnParams: paramForm.value.relyOnParams,
          paramHidden: paramForm.value.paramHidden,
          checkStrictly: paramForm.value.checkStrictly === '' ? '' : paramForm.value.checkStrictly,
          paramPrefix: paramForm.value.paramPrefix,
          datasourceId: paramForm.value.datasourceId
        })
      }
      // 重置表单
      paramRef.value.resetFields()
      commonUtil.clearObj(paramForm.value)
    }
  })
}
// 删除参数
const deleteParam = (index) => {
  paramTableData.value.tableData.splice(index, 1)
}
// 编辑参数方法
const editParam = (row) => {
  // 直接更新响应式对象的属性
  paramForm.value.paramName = row.paramName
  paramForm.value.paramCode = row.paramCode
  paramForm.value.paramType = row.paramType
  paramForm.value.dateFormat = row.dateFormat
  paramForm.value.paramDefault = row.paramDefault
  paramForm.value.paramRequired = row.paramRequired
  paramForm.value.selectType = row.selectType
  paramForm.value.selectContent = row.selectContent
  paramForm.value.isRelyOnParams = row.isRelyOnParams
  paramForm.value.relyOnParams = row.relyOnParams
  paramForm.value.paramHidden = row.paramHidden
  paramForm.value.checkStrictly = row.checkStrictly
  paramForm.value.paramPrefix = row.paramPrefix
  paramForm.value.datasourceId = row.datasourceId
}
// 添加输入参数方法
const addInParam = () => {
  inParamRef.value.validate((valid) => {
    if (valid) {
      // 查找参数是否已存在
      const result = commonUtil.getItemIndexFromList(
        procedureInParamTableData.value.tableData,
        'paramCode',
        procedureParamForm.value.paramCode
      )

      if (result.index >= 0) {
        // 更新已存在的参数
        const item = procedureInParamTableData.value.tableData[result.index]
        Object.assign(item, {
          paramName: procedureParamForm.value.paramName,
          paramType: procedureParamForm.value.paramType,
          paramDefault: procedureParamForm.value.paramDefault,
          paramRequired: procedureParamForm.value.paramRequired,
          paramHidden: procedureParamForm.value.paramHidden
        })
      } else {
        // 添加新参数
        procedureInParamTableData.value.tableData.push({
          paramName: procedureParamForm.value.paramName,
          paramCode: procedureParamForm.value.paramCode,
          paramType: procedureParamForm.value.paramType,
          paramDefault: procedureParamForm.value.paramDefault,
          paramRequired: procedureParamForm.value.paramRequired,
          paramHidden: procedureParamForm.value.paramHidden
        })
      }

      // 重置表单
      inParamRef.value.resetFields()
      commonUtil.clearObj(procedureParamForm.value)
    }
  })
}
// 编辑输入参数方法
const editInParam = (row) => {
  // 直接更新响应式对象的属性
  procedureParamForm.value.paramName = row.paramName
  procedureParamForm.value.paramCode = row.paramCode
  procedureParamForm.value.paramType = row.paramType
  procedureParamForm.value.paramDefault = row.paramDefault
  procedureParamForm.value.paramHidden = row.paramHidden
}
// 删除输入参数
const deleteInParam = (index) => {
  procedureInParamTableData.value.tableData.splice(index, 1)
}

// 添加输出参数方法
const addOutParam = () => {
  outParamRef.value.validate((valid) => {
    if (valid) {
      // 查找参数是否已存在
      const result = commonUtil.getItemIndexFromList(
        procedureOutParamTableData.value.tableData,
        'paramCode',
        procedureOutParamForm.value.paramCode
      )

      if (result.index >= 0) {
        // 更新已存在的参数
        const item = procedureOutParamTableData.value.tableData[result.index]
        Object.assign(item, {
          paramName: procedureOutParamForm.value.paramName,
          paramType: procedureOutParamForm.value.paramType,
          paramDefault: procedureOutParamForm.value.paramDefault
        })
      } else {
        // 添加新参数
        procedureOutParamTableData.value.tableData.push({
          paramName: procedureOutParamForm.value.paramName,
          paramCode: procedureOutParamForm.value.paramCode,
          paramType: procedureOutParamForm.value.paramType,
          paramDefault: procedureOutParamForm.value.paramDefault
        })
      }

      // 重置表单
      outParamRef.value.resetFields()
      commonUtil.clearObj(procedureOutParamForm.value)
    }
  })
}
// 编辑输出参数方法
const editOutParam = (row) => {
  // 直接更新响应式对象的属性
  procedureOutParamForm.value.paramName = row.paramName
  procedureOutParamForm.value.paramCode = row.paramCode
  procedureOutParamForm.value.paramType = row.paramType
}

// 删除输出参数方法
const deleteOutParam = (index) => {
  // 直接操作响应式数组
  procedureOutParamTableData.value.tableData.splice(index, 1)
}

// 上移方法
const moveUp = (index, type) => {
  if (type === '1') {
    // 输入参数
    commonUtil.moveUp(procedureInParamTableData.value.tableData, index)
  } else if (type === '2') {
    // 输出参数
    commonUtil.moveUp(procedureOutParamTableData.value.tableData, index)
  } else if (type === '3') {
    // SQL参数
    commonUtil.moveUp(paramTableData.value.tableData, index)
  }
}

// 下移方法
const moveDown = (index, type) => {
  if (type === '1') {
    // 输入参数
    commonUtil.moveDown(procedureInParamTableData.value.tableData, index)
  } else if (type === '2') {
    // 输出参数
    commonUtil.moveDown(procedureOutParamTableData.value.tableData, index)
  } else if (type === '3') {
    // SQL参数
    commonUtil.moveDown(paramTableData.value.tableData, index)
  }
}

// 获取数据集方法
const getDataSets = async (o: DirData) => {
  // console.log(o,'o getDataSets')
  const id = query.id as unknown as number
  const { list } = await DatasetApi.getPage({ tplId: id, dirId: o.id })
  // datasets.value = list
  o.data = list
}

const OpenDatasets = async (o: DirData) => {
  if (!o.data) {
    getDataSets(o)
  }
}

const clickDatasets = async (o) => {
  datasetItemActive.value = o
  getDatasetColumns(o)
  // if (o.datasetType == '2') {
  //   this.getApiDefaultRequestResult(o)
  // }
}

const getDatasetColumns = async (element, type?: any, isEdit?: any) => {
  const { datasetColumns } = await DatasetApi.getDatasetColumns({ id: element.id })
  element.columns = datasetColumns

  datasetColumnList.value = datasetColumns
  if (isEdit) {
    sqlColumnTableData.value.tableData = datasetColumns
  }
}

const copyAttr = (type, datasetName, colulmnName?: any, isInsert?: any) => {
  let text = ''
  if (type == 1) {
    //文本
    text = '{{' + datasetName + '.' + colulmnName + '}}'
  } else if (type == 2) {
    //图片
    text = '{{@' + datasetName + '.' + colulmnName + '}}'
  } else if (type == 3) {
    //单元格文本
    text = '[' + colulmnName + ']'
  } else if (type == 4) {
    //单元格图片
    text = '[@' + colulmnName + ']'
  } else if (type == 5) {
    //数据集名称
    text = '{{' + datasetName + '}}'
  } else if (type == 6) {
    //区块对
    text = '{{?' + datasetName + '}}{{/' + datasetName + '}}'
  } else if (type == 7) {
    //区块对文本
    text = '{{' + colulmnName + '}}'
  } else if (type == 8) {
    //区块对图片
    text = '{{@' + colulmnName + '}}'
  }
  const input = document.getElementById('clipboradInput') // 承载复制内容
  input.value = text // 修改文本框的内容
  input.select() // 选中文本
  document.execCommand('copy') // 执行浏览器复制命令
  if (isInsert) {
    canvasEditorRef.value.editor.command.executePaste()
    message.success('属性已添加到文档光标处，如未添加成功可直接使用ctrl+v粘贴到对应的位置!')
  } else {
    message.success('复制成功!')
  }

  //
}

// 添加数据集方法
const addDataSet = () => {
  const reportTplId = route.query.tplId
  let paginationValidate = true
  let tplSql = ''

  if (datasourceType.value === 1) {
    tplSql = sqlText.value
    if (!tplSql) {
      message.error('sql语句不能为空')
      return
    }
  }
  sqlRef.value.validate(async (valid) => {
    if (valid) {
      const dirId = sqlForm.value.dirId
      await DatasetApi.create({
        tplId: Number(query.id),
        dirId: sqlForm.value.dirId,
        datasetType: datasourceType.value,
        sqlType: sqlForm.value.sqlType,
        isCommon: sqlForm.value.isCommon,
        commonType: 2,
        isConvert: sqlForm.value.isConvert,
        valueField: sqlForm.value.valueField,
        headerName: sqlForm.value.headerName,
        fixedColumn: JSON.stringify(sqlForm.value.fixedColumn),
        tplSql: Base64.encode('kZSwK2203' + Base64.encode(tplSql) + 'uBwLnByb'),
        useBase64: true,
        tplParam: paramTableData.value.tableData
          ? JSON.stringify(paramTableData.value.tableData)
          : '',
        datasourceId: sqlForm.value.datasourceId,
        datasetName: sqlForm.value.datasetName,
        id: sqlForm.value.id,
        inParam: procedureInParamTableData.value.tableData
          ? JSON.stringify(procedureInParamTableData.value.tableData)
          : '',
        outParam: procedureOutParamTableData.value.tableData
          ? JSON.stringify(procedureOutParamTableData.value.tableData)
          : '',
        subParamAttrs: JSON.stringify(subParamAttrs.value)
      })

      // getDataSets()
      getTplGroupDatasets().then(() => {
        const result = groupList.value.find((dir) => dir.id == dirId)
        // console.log('result',result)
        getDataSets(result as DirData)
      })
      closeAddDataSet()
    }
  })
}

//获取表对应的列
const getTableColumns = async () => {
  var key = sqlForm.value.datasourceId + '_' + datasourceTableName.value
  var columns = datasourceTableColumns[key]
  if (columns) {
    tableColumns.value = columns
  } else {
    const data = await DatasourceApi.execSql({
      datasourceId: sqlForm.value.datasourceId,
      tplSql: Base64.encode('select * from ' + datasourceTableName.value),
      useBase64: true,
      sqlType: 1
    })
    datasourceTableColumns[key] = data
    tableColumns.value = datasourceTableColumns[key]
  }
}
const codeMirror = ref()

const templateInfo = ref({})
const templateSettingInfo = ref({
  header: '',
  main: '',
  footer: ''
})

// 获取合同模板
const _getTemplate = async () => {
  let id = query.id as unknown as number
  const data = await TemplateApi.getTemplate(id)
  if (data) {
    templateInfo.value = data
  }
}

// 获取合同模板设置
const _getTemplateSetting = async () => {
  let id = query.id as unknown as number
  try {
    let data = await TemplateApi.getTemplateSetting(id)
    if (!data) {
      data = {
        header: '[]',
        main: '[]',
        footer: ' []'
      }
    }
    templateSettingInfo.value = data
  } catch (error) {
    templateSettingInfo.value = {
      header: '[]',
      main: '[]',
      footer: ' []'
    }
  }
}

onMounted(async () => {
  nextTick(() => {
    const canvasEditor = canvasEditorRef.value
    const intance = canvasEditor.editor //编辑器实例
    // console.log(canvasEditor.editor.command.getValue(), 'command.getValue()')
  })
  getTplGroupDatasets()
  // _getTemplate()
  _getTemplateSetting()
  getReportTplDateSource()
  // getDataSets()
})
</script>
<style scoped lang="scss">
.pagebox {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.left {
  box-sizing: border-box;
  width: 460px;
  height: 99vh;
  background: #ffffff;
  // box-shadow: 0px 4px 8px #D2E3FF;
  overflow-y: auto;
  overflow-x: hidden;
  //border-top: 1px solid #e7e7e7;

  .group-list {
    padding: 8px;
    border-radius: 4px;
    background: #f1f2f3;
    height: calc(100% - 170px);
    overflow-y: auto;

    ::v-deep .el-collapse-item__header {
      height: 18px;
      line-height: 18px;
      background-color: transparent;
      color: #979797;
      font-size: 12px;
      margin-bottom: 8px;
    }

    ::v-deep .el-collapse-item__wrap {
      background-color: transparent;
    }

    ::v-deep .el-collapse-item__content {
      padding-bottom: 0;
      background-color: transparent;
    }

    .dataset-item {
      // width: 188px;
      box-sizing: border-box;
      border-radius: 4px;
      background: #fff;
      color: #3c3c3c;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 32px;
      height: 32px;
      margin-bottom: 8px;
      padding: 0 10px;
      cursor: pointer;
      transition: all 0.3s;

      .action-box {
        .action {
          width: 18px;
          height: 18px;
          background-size: 100% 100%;
        }
      }
    }
    .dataset-item:hover,
    .dataset-item-active {
      background: white;
      color: $base-color-primary;
      border: 1px solid $base-color-primary;
      .el_icon,
      .el-icon {
        color: $base-color-primary;
      }
    }
  }
}

.dataset-fields {
  .group-list {
    padding: 0px;
    border-radius: 0px;
    background: #fff;
    height: calc(100% - 154px);

    .dataset-item {
      width: 100%;
      background: #f1f2f3;
      border: 1px solid #f1f2f3;
      box-sizing: border-box;
    }

    // .dataset-item:hover,
    // .dataset-item-active {
    //   background: white;
    //   color: $base-color-primary;
    //   border: 1px solid $base-color-primary;
    //   .el_icon{
    //     color: $base-color-primary;
    //   }
    // }
  }
}

.left-head {
  box-sizing: border-box;
  position: absolute;
  width: 240px;
  height: 32px;
  left: 0px;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.left-head .el-icon-s-fold {
  position: absolute;
  right: 5%;
  top: 18.75%;
  bottom: 18.66%;
}

.left-dataset-title {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0px 16px;
  width: 460px;
  height: 48px;
  // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  flex: none;
  order: 1;
  flex-grow: 0;
  background: #fff;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.04);

  .add-dataset {
    border-radius: 4px;
    background-color: #fff;

    :deep(span) {
      font-size: 12px;
    }

    &:hover {
      color: $base-color-primary;
    }
  }

  // margin-top: 2px;
}

.add-dataset-dialog {
  ::v-deep .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 10px 0 0 10px !important;
  }

  ::v-deep .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0 10px 10px 0 !important;
  }

  .variable-content {
    border: 1px solid #e4e9ed;
    background: #fafafa;
    width: 42.5%;

    flex-shrink: 0;

    .variable-title {
      height: 46px;
      padding: 0 16px;
      line-height: 46px;
      color: #1a1a1a;
      font-size: 14px;
      font-style: normal;
      font-weight: bold;
      border-bottom: 1px solid #efebeb;
    }

    .variable-warp {
      padding: 9px 17px;

      .variable-warp-title {
        color: #979191;
        font-size: 12px;
        font-style: normal;
        font-weight: bold;
        line-height: 22px;
        /* 183.333% */
        margin-bottom: 12px;
      }

      .variable-list {
        flex-wrap: wrap;

        .variable-item {
          width: calc((100% - 18px) / 3);
          box-sizing: border-box;
          padding: 0 10px;
          border-radius: 4px;
          background: #e1f2f0;
          height: 32px;
          line-height: 32px;
          color: #595959;
          font-size: 12px;
          margin-right: 9px;
          transition: all 0.3s;
          margin-bottom: 12px;
          cursor: pointer;

          &:hover {
            color: #fff;
            background: $base-color-primary;
            .el-dropdown {
              color: #fff;
            }
          }

          &:nth-child(3n) {
            margin-right: 0;
          }
        }
      }

      .analysis-list {
        border-radius: 3px;
        border: 1px solid #c1e0d9;
        background: #fff;
        padding: 8px 10px 0;

        .variable-item {
          border-radius: 4px;
          background: #f1f2f3;
        }
      }
    }
  }

  .sql-content {
    flex: 1;
    position: relative;
    margin-left: 24px;

    .left-action {
      left: -20px;
      border-radius: 0 3px 3px 0;
    }

    .action-icon {
      cursor: pointer;
      transition: all 0.3s;
      position: absolute;
      top: 50%;

      transform: translateY(-50%);
      z-index: 999;
      background-color: $base-color-primary;
      width: 10px;
      height: 48px;

      &:hover {
        opacity: 0.7;
      }
    }
  }

  .table-warp {
    padding: 10px;
    border: 1px solid #eee;

    .table-title {
      color: #1a1a1a;
      font-feature-settings:
        'liga' off,
        'clig' off;
      font-family: 'PingFang SC';
      font-size: 14px;
      font-style: normal;
      font-weight: bold;
      line-height: normal;
      margin-bottom: 14px;
    }
  }

  .parameter-content {
    .parameter-warp {
      border-radius: 4px;
      background: #f7f9fc;
      padding: 0 14px;

      .warp-title {
        height: 56px;
        line-height: 56px;
        font-size: 14px;
        font-weight: bold;
        color: #1a1a1a;
      }
    }
  }
}

.group-dialog {
  ::v-deep .el-table th.el-table__cell {
    background-color: #fafafa;
    color: rgba(0, 0, 0, 0.85);
  }
}

.dataset-title {
  width: 80px;
  height: 22px;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.9);
  flex: none;
  order: 0;
  flex-grow: 0;
}

.left-dataset-content {
  width: 460px;
  height: calc(100% - 48px);

  .dataset-group,
  .dataset-fields {
    flex: 1;
    padding: 0 12px;
    flex-shrink: 0;
    width: 50%;

    .section-name {
      display: flex;
      align-items: center;
      height: 32px;
      color: #666;
      font-family: 'PingFang SC';
      font-size: 14px;
      font-style: normal;
      font-weight: bold;
      line-height: normal;
      line-height: 32px;
      margin-bottom: 4px;

      .set-group {
        cursor: pointer;
        display: flex;
        align-items: center;
      }

      .setting-text {
        color: $base-color-primary;
        font-family: 'PingFang SC';
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        height: 17px;
        margin-left: 1px;
      }
    }

    .search {
      margin-bottom: 10px;

      ::v-deep .el-input__wrapper {
        height: 36px;
        line-height: 36px;
        border-radius: 6px;
        padding: 0px 11px;
        border-color: rgba(0, 0, 0, 0.1);
      }

      ::v-deep .el-input__icon {
        line-height: 36px;
      }
    }
  }

  .dataset-group {
    border-right: 1px solid #f5f5f5;
  }
}

.right-dataset-title {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 62px;
  height: 32px;
  background: #ffffff;
  /* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
  flex: none;
  order: 1;
  flex-grow: 0;
  margin-top: 2px;
}

.attr-dataset-title {
  width: fit-content;
  height: 20px;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #292e33;
  flex: none;
  order: 0;
  flex-grow: 0;
  font-weight: bold;
}

.addBtn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 2px 8px;
  height: 22px;
  background: #17b794;
  border-radius: 3px;
  flex: none;
  order: 1;
  flex-grow: 0;
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #ffffff;
}

.el-icon-arrow-right {
  position: absolute;
  left: 5.25%;
  cursor: pointer;
}

// .el-icon-edit {
//   position: absolute;
//   right: 17.3%;
//   cursor: pointer;
//   width: 14px;
//   height: 14px;
//   top: 9px;
//   background-image: url('@/assets/img/sheet/edit.png');
//   background-size: 14px 14px;
//   background-repeat: no-repeat;
// }

// .el-icon-delete {
//   position: absolute;
//   right: 7.3%;
//   cursor: pointer;
//   width: 14px;
//   height: 14px;
//   top: 9px;
//   background-image: url('@/assets/img/sheet/del.png');
//   background-size: 14px 14px;
//   background-repeat: no-repeat;
// }

// .right-el-icon-edit {
//   position: absolute;
//   right: 74px;
//   cursor: pointer;
//   width: 14px;
//   height: 14px;
//   top: 9px;
//   background-image: url('@/assets/img/sheet/edit.png');
//   background-size: 14px 14px;
//   background-repeat: no-repeat;
// }

::v-deep .el-collapse-item__arrow {
  margin-right: 0;
}

// .right-block-el-icon-edit {
//   position: absolute;
//   right: 52px;
//   cursor: pointer;
//   width: 14px;
//   height: 14px;
//   top: 9px;
//   background-image: url('@/assets/img/sheet/edit.png');
//   background-size: 14px 14px;
//   background-repeat: no-repeat;
// }

// .right-el-icon-copy-document {
//   position: absolute;
//   right: 52px;
//   cursor: pointer;
//   width: 14px;
//   height: 14px;
//   top: 9px;
//   background-image: url('@/assets/img/sheet/copy.png');
//   background-size: 14px 14px;
//   background-repeat: no-repeat;
// }

// .right-el-icon-delete {
//   position: absolute;
//   right: 30px;
//   cursor: pointer;
//   width: 14px;
//   height: 14px;
//   top: 9px;
//   background-image: url('@/assets/img/sheet/del.png');
//   background-size: 14px 14px;
//   background-repeat: no-repeat;
// }

.dataset-box-content {
  width: 240px;
  min-height: 150px;
  /* background: #A5C3F5; */
  flex: none;
  order: 4;
  flex-grow: 0;
  max-height: 400px;
  overflow-y: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-left: 5px;
  padding-top: 3px;
}

.right-form {
  .column-tag {
    width: 100% !important;
    height: 14px;
    background: transparent;
    color: #595959;
    font-family: 'PingFang SC';
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
    border: 0;
    padding: 0;
  }
}

.column-tag {
  max-width: 150px;
  height: 30px;
  background: #f7bb61;
  border-radius: 2px;
  color: rgba(0, 0, 0, 0.6);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  padding: 0 10px;
  height: 32px;
  line-height: 30px;
  font-size: 12px;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid rgba(64, 158, 255, 0.2);
  font-weight: bold;
}

.center {
  flex: 1;
  position: relative;
  margin: 0 10px;

  .left-action {
    left: -10px;
    border-radius: 0 3px 3px 0;
  }

  .right-action {
    border-radius: 3px 0 0 3px;
    right: -13px;
  }

  .action-icon {
    cursor: pointer;
    transition: all 0.3s;
    position: absolute;
    top: 50%;

    transform: translateY(-50%);
    z-index: 999;
    background-color: $base-color-primary;
    width: 10px;
    height: 48px;

    &:hover {
      opacity: 0.7;
    }
  }

  // height: 100vh;
}

.right {
  // top:50px;
  width: 306px;
  height: 99vh;
  background: #ffffff;
  // box-shadow: 0px 4px 8px #D2E3FF;
}

.right-head {
  // top:50px;
  box-sizing: border-box;
  position: absolute;
  width: 306px;
  height: 32px;
  right: 0px;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.right-head .el-icon-s-unfold {
  position: absolute;
  left: 5%;
  top: 18.75%;
  bottom: 18.66%;
}

.right-title {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 306px;
  height: 48px;
  background: #e7e7e7;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: #fff;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.04);
}

.cell-property {
  display: inline-block;
  width: 50%;
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  cursor: pointer;
  color: #1a1a1a;
  font-weight: 500;
  position: relative;
  text-align: center;

  &::before {
    position: absolute;
    content: '';
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    background: $base-color-primary;
    width: 51px;
    height: 3px;
  }
}

.cell-property-noactive {
  color: #666;

  &::before {
    width: 0;
  }
}

.cell-label {
  color: #292e33;
  font-family: 'PingFang SC';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 12px;
  margin-right: 12px;
}

::v-deep .sub-collapse {
  margin-top: 6px;
  border-bottom: 0;

  .el-collapse-item {
    border-left: 1px solid rgba(0, 0, 0, 0.05);
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 8px;
  }

  .el-collapse-item__header {
    padding-left: 16px !important;
  }

  .el-collapse-item__wrap {
    background-color: #fafafa !important;
    padding: 5px 12px 10px 12px !important;
    border-bottom: 0;

    .el-collapse-item__content {
      background-color: #fff;
      padding: 5px 7px;
      border-radius: 3px;
    }
  }
}

.right-form {
  position: absolute;
  width: 306px;
  height: calc(100vh - 64px - 10px - 48px - 10px);
  right: 0px;
  // top: 50px;
  background: #ffffff;
  overflow: auto;

  ::v-deep .el-collapse-item {
    .el-collapse-item__header {
      position: relative;
      padding: 0 12px;
      height: 36px;
      line-height: 36px;
      background-color: #f9fafa;
      color: #666;
      font-size: 14px;
      font-weight: bold;
    }

    .el-collapse-item__wrap {
      padding: 16px;
      background-color: #fff;
    }

    .el-collapse-item__content {
      padding-bottom: 0;
    }
  }

  .df-form-item {
    display: flex;

    ::v-deep .el-form-item__label {
      margin-right: 12px;
      margin-bottom: 0;
    }
  }

  ::v-deep .el-form-item {
    margin-bottom: 8px;
  }

  ::v-deep .el-form--label-top .el-form-item__label {
    padding-bottom: 0;
    line-height: 32px;
  }
}

::v-deep .demo-form-inline.el-form--label-top .el-form-item__label {
  padding-bottom: 0;
  line-height: 32px;
}

::v-deep .demo-form-inline .el-select,
::v-deep .demo-form-inline .el-textarea,
::v-deep .demo-form-inline .el-input {
  width: 100% !important;
}

.df-form {
  display: flex;
  flex-wrap: wrap;

  ::v-deep .el-form-item {
    width: 20%;
    display: flex;
    box-sizing: border-box;
    padding-right: 12px;

    &:nth-child(5n) {
      margin-right: 0;
    }

    .el-form-item__label {
      flex-shrink: 0;
      width: 80px;
    }

    .el-form-item__content {
      width: calc(100% - 92px);
    }
  }
}

.right-form::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

.right-form::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 5px solid transparent;
}

.right-form::-webkit-scrollbar-track {
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2) inset;
}

.right-form::-webkit-scrollbar-thumb {
  min-height: 20px;
  background-clip: content-box;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
}

.right-form::-webkit-scrollbar-corner {
  background: transparent;
}

.blockBtn {
  width: 230px;
  height: 30px;
  background: #17b794;
  border-radius: 4px;
  line-height: 5px;
  border-color: #17b794;
}

.contentbox {
  display: flex;
}

.dataset-box-content::-webkit-scrollbar {
  width: 5px;
}

/*修改左侧垂直滚动条的样式*/
.left::-webkit-scrollbar {
  width: 5px;
}

/*修改左侧垂直滚动条的样式*/
.tplname {
  padding: 0px 16px;
  background-color: rgba(208, 208, 208, 0);
  font-size: 18px;
  line-height: 30px;
  color: #1a1a1a;
  font-weight: bold;
  margin: 5px 0;
}

.header-box {
  margin-bottom: 10px;
}

._header {
  height: 64px !important;
  padding: 0px;
  background-color: #fff;

  //   border-bottom: 1px solid #ccc;
  .headerRight {
    padding-right: 24px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.9);

    .role-name {
      margin-right: 8px;
    }
  }

  .el-dropdown-link {
    color: rgba(0, 0, 0, 0.9);
  }
}

::v-deep .el-avatar {
  background: #17b794 !important;
}

::v-deep .el-dialog__wrapper {
  overflow: hidden;
  //    z-index: 2005 !important;
  pointer-events: none !important;
}

::v-deep .el-dialog {
  pointer-events: auto !important;
  /* background:#d9ebf0 !important; */
}

::v-deep .authdialog {
  margin-top: 50px !important;
  margin-left: 0px !important;
  flex-direction: column !important;
  // overflow: hidden !important;
  max-height: calc(100% - 90px) !important;
  top: 0 !important;
  left: 0px !important;
  bottom: 0;
  pointer-events: auto !important;
  /* background:#d9ebf0 !important; */
}

.authdialog ::v-deep .el-dialog__body {
  height: calc(100% - 90px) !important;
  overflow: auto;
}

.authdialog ::v-deep .el-dialog-div {
  max-height: 60vh;
  overflow: auto;
  margin-left: 10px;
}

.authdialog ::v-deep .el-dialog-div::-webkit-scrollbar {
  display: none;
  /*隐藏滚动条*/
}

.authdialog ::v-deep .el-dialog__title {
  font-weight: bold;
}

.el-divider--horizontal {
  margin: 10px 0;
}

::v-deep .el-tabs__content .el-tab-pane {
  height: 600px;
  overflow: auto;
}

::v-deep .vue-codemirror .CodeMirror {
  border: 1px solid #eee;
}

.config-panel {
  background: #ffffff;
  margin-left: 1px;
  top: -48px;
  position: relative;
  width: 306px;
  // height: 95%;
  height: calc(100vh - 64px - 10px - 10px);

  display: flex;
  flex-direction: column;
  overflow: auto;

  .config-header {
    width: 100%;
    height: 48px;
    // background: #2F343D;
    font-size: 16px;
    font-weight: bold;
    color: #1a1a1a;
    line-height: 48px;
    text-align: center;
  }

  .config-box {
    flex: 1;
    padding: 10px;
    overflow: auto;
  }

  /*定义滚动条的宽度*/
  .config-box::-webkit-scrollbar {
    width: 0;
  }
}
</style>

<style lang="scss">
.overflow-text {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.df-c {
  display: flex;
  align-items: center;
}
.df-c-b {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.add-dataset-dialog {
  .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 10px 0 0 10px !important;
  }

  .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0 10px 10px 0 !important;
  }
}
</style>

<style lang="scss" scoped>
.main {
  width: 100%;
  display: flex;
  height: 100%;
  min-width: 1288px;
  // height: calc(
  //   100vh - 20px - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height)
  // ) !important;
}
.left {
  box-sizing: border-box;
  width: 460px;
  margin-right: 10px;
  height: 100%;
  background: #ffffff;
  overflow-y: auto;
  overflow-x: hidden;
  // border-top: 1px solid #e7e7e7;
}
/*修改左侧垂直滚动条的样式*/
.left::-webkit-scrollbar {
  width: 5px;
}

.left-dataset-title {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0px 16px;
  width: 100%;
  height: 48px;
  flex: none;
  order: 1;
  flex-grow: 0;
  background: #fff;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.04);

  .dataset-title {
    width: 80px;
    height: 22px;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.9);
    flex: none;
    order: 0;
    flex-grow: 0;
  }

  .add-dataset {
    border-radius: 4px;
    // background-color: #fff;

    :deep(span) {
      font-size: 12px;
    }

    &:hover {
      color: $base-color-primary;
    }
  }

  // margin-top: 2px;
}
.left-dataset-content {
  width: 100%;
  height: calc(100% - 48px);

  .dataset-group,
  .dataset-fields {
    flex: 1;
    padding: 0 12px;
    flex-shrink: 0;
    width: 50%;

    .section-name {
      height: 32px;
      color: #666;
      font-family: 'PingFang SC';
      font-size: 14px;
      font-style: normal;
      font-weight: bold;
      line-height: normal;
      line-height: 32px;
      margin-bottom: 4px;

      .set-group {
        cursor: pointer;
      }

      .setting-text {
        color: $base-color-primary;
        font-family: 'PingFang SC';
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        height: 17px;
        margin-left: 1px;
      }
    }

    .search {
      margin-bottom: 10px;

      ::v-deep .el-input__wrapper {
        height: 36px;
        line-height: 36px;
        border-radius: 6px;
        padding: 0px 11px;
        border-color: rgba(0, 0, 0, 0.1);
      }

      ::v-deep .el-input__icon {
        line-height: 36px;
      }
    }
  }

  .dataset-group {
    border-right: 1px solid #f5f5f5;
  }
}

.canvas {
  position: relative;
  flex: 1;
  // width: calc(100% - 460px);
  height: 100%;
}
.el_icon {
  margin-left: 4px;
}
.el-icon:focus-visible {
  outline: unset;
}
</style>
